<div class="ui grid">
    <div class="ui twelve wide column">
        <ng-container *ngIf="dashboards && dashboards.length > 0">
            <ng-container *ngFor="let d of dashboards">
                <div class="dashboard">
                    <h4>{{d.title}}</h4>
                    <div class="graph">
                        <app-chart [configuration]="d"></app-chart>
                    </div>
                </div>
            </ng-container>
        </ng-container>
        <ng-container *ngIf="dashboards && dashboards.length === 0">
            <div class="ui info message">
                {{ 'application_home_no_graph' | translate }}
            </div>
        </ng-container>
        <ng-container *ngIf="!dashboards">
            <div class="ui text active loader">{{ 'common_loading' | translate }}</div>
        </ng-container>
    </div>
    <div class="ui four wide column">
        <div class="ui segment">
            <h4>{{ 'application_home_repo' | translate }}</h4>
            <ng-container *ngIf="application.vcs_server">
                <ul>
                    <li *ngIf="overview">
                        <a [href]="overview?.git_url" target="_blank">
                            {{application.vcs_server + ' - ' + application.repository_fullname}}
                        </a>
                    </li>
                    <li *ngIf="!overview">
                        {{application.vcs_server + ' - ' + application.repository_fullname}}
                    </li>
                </ul>
            </ng-container>
            <ng-container *ngIf="!application.vcs_server">
                <div class="ui info message">
                    <a [routerLink]="['/project', project.key, 'application', application.name]"
                        [queryParams]="{tab: 'advanced'}">{{
                        'application_home_no_repo' | translate }}</a>
                </div>
            </ng-container>
            <h4>{{ 'application_home_integration' | translate }}</h4>
            <ul *ngIf="application.deployment_strategies">
                <li *ngFor="let p of application.deployment_strategies | keys">
                    {{ p }}
                </li>
            </ul>
            <div class="ui info message" *ngIf="!application.deployment_strategies">
                <a [routerLink]="['/project', project.key,'application', application.name]"
                    [queryParams]="{tab: 'advanced'}">{{
                    'application_home_no_integration' | translate }}</a>
            </div>
            <h4>{{ 'common_usage' | translate}}</h4>
            <ng-container *ngIf="application.usage && application.usage.workflows">
                <ul>
                    <li *ngFor="let w of application.usage.workflows">
                        <a [routerLink]="['/project', w.project_key, 'workflow', w.name]">{{w.name}}</a>
                    </li>
                </ul>
            </ng-container>
            <ng-container
                *ngIf="!application.usage || !application.usage.workflows || application.usage.workflows.length === 0">
                <div class="ui info message">
                    {{ 'application_home_no_usage' | translate }}
                </div>
            </ng-container>

        </div>
    </div>
</div>

<!-- HISTORY -->
<div class="history" *ngIf="overview">
    <h4>{{ 'application_home_history' | translate }}</h4>
    <div class="ui stackable three cards">
        <ng-container *ngFor="let k of overview.history | keys">
            <div class="ui card">
                <div class="content">
                    <a class="header" [routerLink]="['/project', project.key, 'workflow', k]">{{k}}</a>
                    <div class="description">
                        <div *ngFor="let h of overview.history[k]">
                            <i class="icon ribbon-state success"></i>
                            <a class="info" [routerLink]="['/project', project.key, 'workflow', k, 'run', h.num]">
                                {{'#' + h.num + ' - '}}
                                {{ h.last_modified | amTimeAgo}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </ng-container>
    </div>
</div>
